<template lang="pug">
 .container
   p.one.item {{message}}
   p.two.item(:style="{'background-image': `linear-gradient(${Math.round(range*3.6)}deg, red, blue)`}") {{`linear-gradient(${Math.round(range*3.6)}deg, red, blue)`}}
   p.two.item 2
   p.three.item 3
     button(@click="onClick" type="button") {{buttonText}}
   .range
     input(type="range"  v-model.number="range")
     span {{Math.round(range*3.6)}}
   ul(v-if="list.length")
    li(v-for="(item, index) in list" :key="index")    {{item}}
</template>

<script>
export default {
  data() {
    return {
      message: "Hello world.",
      buttonText: "Click.",
      list: ["吃饭", "睡觉", "打豆豆"],
      range: 0
    };
  },
  methods: {
    onClick() {
      alert("you clicked me.");
    },
    handleChange() {}
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 80%;
  height: 800px;
  background: #ccc;
  margin: 0 auto;
}
.item {
  height: 80px;
  margin-top: 16px;
  border-top: 1px solid #000;
  border-bottom: 1px dashed #38f;
  position: relative;
  &.one {
    background-image: linear-gradient(red, blue);
    &::after {
      content: "";
      display: block;
      height: 100%;
      transform: scaleX(-1);
      background-image: linear-gradient(270deg, #00ffbf 12%, #003326 100%);
      width: 132px;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
  &.two {
    background-image: linear-gradient(270deg, #656464 11%, #151515 84%);
    &::after {
      content: "";
      display: block;
      height: 100%;
      transform: scaleX(-1);
      background-image: linear-gradient(270deg, #00ffbf 12%, #003326 100%);
      width: 132px;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
</style>